<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lunar</title>
    <meta http-equiv="refresh" content="60">
    <style>
        body {
            margin: 0;
            background-color: #000;
            color: whitesmoke;
            text-align: center;
        }

        .left, .right {
            float: left;
            width: 50%;
            margin-top: 8pc;
            margin-bottom: -5pc;
        }

        .right {
            float: right;
        }

        h1 {
            margin-top: -5pc;
            margin-bottom: 0;
            font-size: 50px;
            font-weight: 400;
        }

        p {
            margin-top: 0;
            font-size: 100px;
        }

        span {
            font-size: 90px;
        }

        .smog {
            background-image: linear-gradient(to right, #0f75ee 0%, #b9222b 100%);
            text-align: left;
            text-shadow: 1px 1px 7px black;
            margin-bottom: 0;
        }

        #progress {
            background-color: white;
            height: 2px;
            display: block;
            transition: all .5s 0s;
        }
    </style>
</head>
<body>
<div style="background-color: whitesmoke;color: black;text-align: left">
    <h1 style="padding: 2pc;margin: 0 5%"> 示例应用：万年历
        <a href="https://gitee.com/lifanko/lunar" style="font-size: 20px;color: #0f75ee">文档 - LunarJS</a>
    </h1>
</div>
<div class="left">
    <h1>公历</h1>
    <p id="solar_date"></p>
    <h1>农历</h1>
    <p id="lunar_date"></p>
    <h1 id="week"></h1>
    <p id="time"></p>
</div>
<div class="right">
    <h1>室外温度</h1>
    <p>3.5<span> ℃</span></p>
    <h1>室内温度</h1>
    <p>22.3<span> ℃</span></p>
    <h1>空气湿度</h1>
    <p>42.7<span> %</span></p>
</div>
<div style="clear: both"></div>
<p style="margin: 0;font-size: 50px">空气质量指数</p>
<span id="progress"></span>
<p class="smog"><span style="margin-left: 8%">55</span></p>
<script src="Lunar.min.js"></script>
<script>
    let time = document.getElementById('time');
    let progress = document.getElementById('progress');
    let i = 0;

    setDate();
    setTime();

    setInterval(function () {
        setTime();
    }, 1000);

    function setTime() {
        let date = new Date();
        let minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
        let seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
        time.innerHTML = date.getHours() + ':' + minute + '<span style="font-size: 58px">:' + seconds + '</span>';

        progress.style.width = Math.floor(i / 3 * 5) + '%';
        if (i < 60) {
            i++;
        }
    }

    function setDate() {
        let solar_date = document.getElementById('solar_date');
        let lunar_date = document.getElementById('lunar_date');
        let week = document.getElementById('week');

        let date = new Date();
        let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        let date_buffer = date.toLocaleDateString().split('/');
        let lunar = new Lunar(date_buffer[0], date_buffer[1], date_buffer[2]);

        solar_date.innerText = date.toLocaleDateString();
        lunar_date.innerText = lunar.info.date.string;
        week.innerText = weekday[date.getDay()];
    }
</script>
</body>
</html>